<template>
  <el-card shadow="always">
    <section
      class="in-table-search"
    >
      <ed-toolbar
        v-if="toolbar"
        v-bind="toolbar"
        :row="ids"
        @click="click"
        class="in-table-toolbar"
      />
      <el-form
        :model="query"
        v-bind="search"
        v-if="search"
        class="in-table-form"
      >
        <ed-form-fields
          v-bind="search"
          v-model="query"
        >
          <el-col :span="4">
            <el-button @click="onQuery(search.url, $event)">
              查询
            </el-button>
          </el-col>
        </ed-form-fields>
      </el-form>
    </section>
    <ed-table
      v-bind="table"
      :rows="rows"
      @sort-change="sort"
      @selection-change="selection"
      @click="click"
      :selected="selected"
    />
  </el-card>
</template>

<script>
import EdTable from '../components/EdTable.vue'
import { setView } from '../util/event'
import EdFormFields from '../components/form/EdFormFields'
import EdToolbar from '../components/EdToolbar'

/**
 * 这里实现一个封装好的网络化表格
 */
export default {
  components: { EdTable, EdFormFields, EdToolbar },
  props: {
    /**
     * 分页信息
     */
    pagination: {
      type: Object,
      default: () => null
    },
    /**
     * 表格结构信息
     */
    table: {
      type: Object,
      default: () => ({})
    },
    /**
     * 工具栏
     */
    toolbar: {
      type: Object,
      default: () => null
    },
    /**
     * 检索
     */
    search: {
      type: Object,
      default: () => null
    },
    /**
     * 数据地址
     */
    url: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      rows: [],
      selected: [],
      query: {}
    }
  },
  computed: {
    ids () {
      return {
        id: this.selected
      }
    }
  },
  created () {
    const vm = this
    this.refresh()
    // 设置状态栏
    this.pagination && setView(this, {
      name: 'ElPagination',
      layer: 'footer',
      definition: {
        ...vm.pagination
      },
      event: {
        'size-change': vm.refresh,
        'current-change': vm.refresh
      }
    })

    // // 设置工具栏
    // this.toolbar && setView(this, {
    //   name: 'EdToolbar',
    //   layer: 'toolbar',
    //   definition: {
    //     ...vm.toolbar,
    //     row: vm.ids
    //   },
    //   event: {
    //     click: vm.click
    //   }
    // })
  },
  methods: {
    sort (column, prop, order) {
      this.refresh({
        sort: {
          field: prop,
          order
        }
      })
    },
    selection (mSelect) {
      this.selected = mSelect
      this.$store.commit('resetView', { layer: 'toolbar', definition: { row: mSelect } })
    },
    async click (action, row) {
      try {
        // console.log(action)
        const data = await this.$http.Fire(action, row)
        let qs = {}
        if (data && data.value) {
          // 可编辑单元格
          if (action.cell) return this.cellEdit(row, data.value)

          // 刷新行
          if (action.row) return this.rowEdit(row, data.value)

          qs = data.value
        }
        return this.refresh(qs)
      } catch (e) {}
    },
    /**
     * 直接刷新就很合适
     * Cell 编辑
     */
    async cellEdit (row, value) {
      const r = this.rows.find((r_) => +r_.id === +row.id)

      r[row.name] = value
    },

    /**
     * 直接刷新就很合适
     * 行编辑
     */
    async rowEdit (row, value) {
      const i = this.rows.findIndex((r_) => +r_.id === +row.id)

      this.rows.splice(i, 1, value)
    },

    async refresh (qs = {}) {
      // console.log('refresh')
      if (!this.url) return
      const {
        rows,
        selected = null,
        pagination = null
      } = await this.$http.Post(this.url, qs)
      // 数据
      this.rows = rows
      // 选择信息
      selected !== null && this.selection(selected)
      // 分页信息
      pagination !== null && this.$store.commit(
        'resetView',
        { layer: 'pagination', definition: pagination }
      )
    },
    /**
     * 执行查询动作
     */
    async onQuery (url, value) {

    }
  }
}
</script>

<style scoped>
.in-table-search {
  padding-left: 50px;
  border-bottom: #d9d9d9 1px solid;
  margin-bottom: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.in-table-toolbar {
  padding-top: 30px;
  padding-bottom: 10px;
}
.in-table-form {
  width: 1000px;
}
</style>
